<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>float使用说明</title>
		<style type="text/css">
			.clearfix:after 
			{ 
				visibility: hidden; 
				display: block; 
				font-size: 0; 
				content: "."; 
				clear: both; 
				height: 0; 
			} 
			* html .clearfix 
			{ 
				zoom: 1; 
			} 
			*:first-child + html .clearfix 
			{ 
				zoom: 1; 
			} 
		</style>
	</head>
	<body>
		<ol>
			<li>浮动元素自动设成block（并且有包裹性zzy）</li>
			<li>浮动后边非浮动元素的显示问题</li>
			<li>多个浮动方向一致的元素使用流式排列，此时要注意浮动元素的高度</li>
			<li>子元素全为浮动元素的高度自适应问题</li>
		</ol>
		1.
		<div style="height: 200px; width: 200px; border: 1px solid;"> 
			<span style="float: left; width: 150px; height: 150px; margin: 5px; padding: 5px; 
			border: solid 1px red; background-color: Olive;">浮动元素span</span> 
		</div> 
		<div style="height: 200px; width: 200px; border: 1px solid;"> 
			<span style="width: 150px; height: 150px; margin: 5px; padding: 5px; border: solid 1px red; 
			background-color: Olive;">非浮动元素span</span> 
		</div> 
		2.
		<div style="width: 600px; height: 500px; border: solid 1px blue; background-color: yellow;"> 
			<div style="float: left; width: 250px; height: 250px; border: solid 1px Aqua; background-color: gray; 
				margin: 10px 0 0 10px;"> 
				浮动DIV
			</div> 
			<div style="background-color: red; border: solid 1px green; width: 300px; height: 150px;"> 
				跟在浮动元素后边的DIV
			</div> 
			<span style="background-color: red; border: solid 1px green; margin: 0 0 0 -50px;"> 
			跟在浮动元素后边的span</span> 
		</div> 
		3.
		略
		4.
		<div style="border:2px solid red;" class="clearfix"> 
<div style="float:left;width:80px;height:80px;border:1px solid blue;" >TEST DIV</div> 
<!--<div style="clear:both;"></div> -->
</div> 
	</body>
</html>
